<script>
import UniPopup from "../../../../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
import { cloneDeep } from "../../../../../utils"

export default {
  name: "answerRecord",
  components: { UniPopup },
  data() {
    return {
      answerRecord: [],
    };
  },
  props: {
    viewAnalysis: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    open(answerRecord) {
      this.answerRecord = cloneDeep(answerRecord);
      this.$refs.popup.open();
    },
    //计算class样式
    getClass(item) {
      //做题模式
      if (!this.viewAnalysis) {
        if (item.userAnswer) {
          return "hasDo";
        } else {
          return "hasNotDo";
        }
        //查看解析模式
      } else {
        if (
          (item.questionAnswer && item.questionAnswer === item.userAnswer) ||
          (item.answer && item.answer === item.userAnswer) ||
          //阅读理解题型
          (item.childQuestions &&
            item.childQuestions.some(
              (child) => child.answer && child.userAnswer,
            ))
        ) {
          return "correct";
        } else {
          return "incorrect";
        }
      }
    },
  },
  emits: ["change"],
};
</script>

<template>
  <uni-popup ref="popup" type="bottom">
    <view class="popup-content">
      <view class="list">
        <view
          v-for="(item, index) in answerRecord"
          :key="item.index"
          @click="
            $emit('change', index);
            $refs.popup.close();
          "
          :class="['item', getClass(item)]"
        >
          <!--					题目序号-->
          <text v-if="item.serialNum">{{ item.serialNum }}</text>
          <text v-else-if="item.questionSerialNum">{{
            item.questionSerialNum
          }}</text>
          <text v-else>{{ index }}</text>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<style scoped lang="scss">
.popup-content {
  max-height: 50vh;
  padding: {
    top: 30rpx;
    bottom: calc(env(safe-area-inset-bottom) + 40rpx);
    left: 30rpx;
    right: 30rpx;
  }
  border-radius: 50rpx 50rpx 0 0;
  background: white;
  overflow: auto;
  .list {
    display: flex;
    flex-wrap: wrap;
    .item {
      margin: {
        left: 20rpx;
        right: 20rpx;
        top: 20rpx;
      }
      font-size: calc(32rpx * var(--font-size-rate));
      width: 98rpx;
      height: 98rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 49rpx;
      &.hasDo {
        background: var(--subtheme-color);
      }
      &.hasNotDo {
        background: var(--gray-background-color);
      }
      &.correct {
        background: #88debc;
      }
      &.incorrect {
        background: #ff9c9c;
      }
    }
  }
}
</style>
